import React, { ReactNode } from 'react'
import { BaseDetailPage } from '../BaseDetailPage'
import { PageContainer } from 'src/components/pageContainer'
import { RaceDetailPageNav } from 'src/components/nav/detailPageNav/RaceDetailPageNav'
import { RouteComponentProps } from 'react-router'
import { renderRoutes, RouteConfigComponentProps } from 'react-router-config'
import QueueAnim from 'rc-queue-anim'

interface RaceDetailPageProps extends RouteComponentProps, RouteConfigComponentProps{
}

interface RaceDetailPageState {

}

const mockData = {
    title: '2020年第十届 MathorCup 高校数学建模挑战赛',
    subTitle: '2019 - 2020'
}

export class RaceDetailPage extends React.Component<RaceDetailPageProps, RaceDetailPageState> {
    render (): ReactNode {
        return (
            <BaseDetailPage data={mockData}>
                <QueueAnim delay={200} duration={700} type={'bottom'}>
                    <PageContainer key={'container'} shadow header={
                        <RaceDetailPageNav
                            unReadAnnounceNum={10}
                            matchUrl={this.props.match.url}
                            isSigned={false}/>
                    } style={{ minHeight: '1000px' }}>
                        {renderRoutes(this.props.route?.routes)}
                    </PageContainer>
                </QueueAnim>
            </BaseDetailPage>
        )
    }
}

export default RaceDetailPage
